// 导入 React，用来创建 react 元素的
import React from 'react';
// 导入对应渲染平台库
import ReactDOM from 'react-dom/client';

import './index.css';

// 渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 创建 react 元素，创建在页面上渲染的标签
// 声明式UI
// eslint-disable-next-line no-unused-vars
const h1 = <h1>Hello React</h1>;

// 用 React 底层 API 创建一下
const h2 = React.createElement(
  'h2',
  { id: '123' },
  'Hello React2',
  'Hello React3'
);

// 1. 创建一个 p 标签，包含“月薪过万”文本
// eslint-disable-next-line no-unused-vars
const p = <p>月薪过万</p>;
// 2. 给 p 标签添加一个 id=123 的属性
const p2 = <p id="123">月薪过万</p>;
// 3. 给 p 标签添加一个 class 选择器 title，内容是将字体颜色设置为 red
const p3 = (
  <p id="123" className="title">
    月薪过万
  </p>
);
// 4. 创建一个 div 标签，包含上面创建的 p 标签
const div = <div>{p3}</div>;

// const data = axios.get

let data = 123;
// 5. 复杂结构
const div2 = (
  <div>
    <h2 id={data}>购物列表{data}</h2>
    <ul>
      <li>华为</li>
      <li>iPhone</li>
    </ul>
  </div>
);

const div22 = React.createElement(
  'div',
  null,
  React.createElement('h2', null, '购物列表'),
  React.createElement(
    'ul',
    null,
    React.createElement('li', null, '华为'),
    React.createElement('li', null, 'iPhone')
  )
);

console.log(typeof div, div);

const hr = <hr />;

const el = (
  <React.Fragment>
    <h1>1</h1>
    <h1>2</h1>
  </React.Fragment>
);
const fn = () => {};

const el2 = <div onClick={fn}>div</div>;

const fn2 = () => {
  return (
    <div>
      <h1>123</h1>
      <h2>xxx</h2>
    </div>
  );
};

const el3 = fn2();

// 渲染到页面上
root.render(div2);
